// 导入明细
<template>
  <div class="box">
    <el-card>
      <div class="title">
        <h2>{{ title }}</h2>
      </div>

      <el-table :data="tableData" style="width: 100%" :height="tableHeight" border>
        <el-table-column prop="classname" label="分类" min-width="100" align="center"> </el-table-column>
        <el-table-column prop="keytask" label="重点任务" min-width="250"> </el-table-column>
        <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
        <el-table-column prop="tasknote" label="工作举措" min-width="500">
          <template slot-scope="scope">
            <div v-html="scope.row.tasknote"></div>
          </template>
        </el-table-column>
        <el-table-column prop="enddatearr" label="完成时间" min-width="180">
          <template slot-scope="scope">
            <div v-html="scope.row.enddatearr"></div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="progress" label="完成进展" min-width="300">
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.progress" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
          </template>
        </el-table-column> -->
        <el-table-column prop="workdpnamearr" label="责任部门" min-width="180">
          <template slot-scope="scope">
            <div v-html="scope.row.workdpnamearr"></div>
          </template>
        </el-table-column>
        <el-table-column prop="newfill" label="最新进展" min-width="300">
          <template slot-scope="scope">
            <el-progress class="showProgressColor" :percentage="scope.row.comper"></el-progress>

            <div v-for="item in scope.row.linklists">
              <el-link type="success" @click="onlinkTaskTitle(item.url)">{{ item.name }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="standstr" label="完成标准" min-width="500">
          <template slot-scope="scope">
            <div v-html="scope.row.standstr"></div>
          </template>
        </el-table-column>
        <el-table-column prop="objectivearr" label="预期标志性成果" min-width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.objectivearr"></div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ProTaskList, QueryFillBySplitID } from '@/api/task/index'

export default {
  name: 'ImportDetailsC',
  data() {
    return {
      tableData: [],
      tableHeight: '',
      id: '',
      title: '',
      loguserid: this.$store.getters.userInfo.id,
      logorgid: this.$store.getters.userInfo.orgid
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/Tasklist/ImportDetailsC') {
          this.id = this.$route.query.id
          this.onSearch()
        }
      }
    },
    // '$route.query.id': {
    //   immediate: true,
    //   handler(newId) {
    //     this.id = newId
    //     console.log(this.id)
    //     if (this.id != undefined) {
    //       // this.onSearch()
    //     }
    //   }
    // },
    '$route.query.title': {
      immediate: true,
      handler(newId) {
        console.log(newId)
        this.title = newId
      }
    }
  },
  created() {
    // 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
    this.tableHeight = window.innerHeight - 225
    // this.onSearch()
  },
  methods: {
    async onSearch() {
      const data = {
        proid: this.id,
        loguserid: this.loguserid,
        logorgid: this.logorgid
      }
      const { content } = await ProTaskList(data)
      if (content != null) {
        content.forEach(item => {
          if (item.tasknote != null) {
            item.tasknote = item.tasknote.replace(/\\n/g, '<br/>')
            item.tasknote = item.tasknote.replace(/\n/g, '<br/>')
          }

          if (item.standstr != null) {
            item.standstr = item.standstr.replace(/\\n/g, '<br/>')
            item.standstr = item.standstr.replace(/\n/g, '<br/>')
          }

          if (item.enddatearr != null) {
            item.enddatearr = item.enddatearr.replace(/\\n/g, '<br/>')
            item.enddatearr = item.enddatearr.replace(/\n/g, '<br/>')
          }

          if (item.objectivearr != null) {
            item.objectivearr = item.objectivearr.replace(/\\n/g, '<br/>')
            item.objectivearr = item.objectivearr.replace(/\n/g, '<br/>')
          }

          if (item.workdpnamearr != null) {
            item.workdpnamearr = item.workdpnamearr.replace(/\\n/g, '<br/>')
            item.workdpnamearr = item.workdpnamearr.replace(/\n/g, '<br/>')
          }

          var newlist = []
          if (item.filearr != null) {
            var linklist = item.filearr.split('\\n')
            linklist.forEach(row => {
              console.log(row)
              var newfilearr = row.split('|')
              newlist.push({ name: newfilearr[0], url: newfilearr[1] })
            })
          }
          item.linklists = newlist
        })
      }
      this.tableData = content

      console.log(row.content)
    },
    onlinkTaskTitle(row) {
      window.open(row)
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> .el-select {
  width: 100%;
}
.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.title {
  display: flex;
  padding-bottom: 20px;
}
h2 {
  margin: 0 auto;
}
</style>
